<script lang="ts">
  export default  {
    beforeCreate() {
      console.log('beforeCreate')
    },
    //选项式api (OptionsApi)  ====>vue2
    //compositionAPI  =====>组合式vue3
    setup() {
      console.log('setup') //vue3
      // console.log(this) //this是 undefined
      //数据 原来是写在data中的 注意此时的数据不是响应式的
      let name = '张三'
      let age = 18
      let tel = 1246549851

      //方法 注意这样修改name 页面是没有变化的.
      function changeName () {
        name = '赵四'
        console.log(name)//name被修改了 但是name不是相应是的
      }
      function changeAge () {
        console.log(age)
        age += 1
      }
      function showTel () {
        alert(tel)
      }

      //所有定义的都需要return出去
      return {name, age,changeName,changeAge,showTel}
      //setup的返回值也可以是个渲染函数,直接渲染页面
      // return  () => '直接渲染页面'
    }
  }
</script>

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin:  0 15px;
}
</style>